<template>
    <div>
        <!-- 预计主页面 -->
        <div class="tou">
            <header1 now=0></header1>
        </div>
        <el-carousel height="100vh" direction="vertical" :autoplay="false" trigger='click' :loop="false" ref="e1lunbo">
            <el-carousel-item>
                <div class="bg">
                    <img src="../assets/新建文件夹/bg1_c2b861d.jpg" />
                    <div class="download">
                        <img class="m1" src="../assets/新建文件夹/toptit_71513e7.png" alt="" />
                        <img class="m2" src="../assets/新建文件夹/slogan_66777e2.png" alt="" />
                        <img class="m3" src="../assets/新建文件夹/wecaht_eea31da.png" alt="" />
                    </div>
                    <div class="girl">
                        <img src="../assets/新建文件夹/girl_a2c668c.png" alt="" />
                    </div>
                </div>
            </el-carousel-item>

            <el-carousel-item>
                <div class="s2">
                    <div>
                        <img src="../assets/新建文件夹/tit1_73b58f9.png" alt="" />
                        <p>家庭服务快捷下单，尽享悠闲生活</p>
                    </div>
                    <div class="s3">
                        <ul>
                            <li class="m4">
                                <img src="../assets/新建文件夹/service1_be44146.png" alt="" />
                                <p>日常保洁</p>
                                <p>深度保洁</p>
                                <p>长期保洁</p>
                                <p>擦玻璃</p>
                                <p>新居开荒</p>
                                <p>厨房保养</p>
                                <p>卫生间保养</p>
                                <p>地板打蜡</p>
                                <p>皮沙发保养</p>
                            </li>
                            <li>
                                <img src="../assets/新建文件夹/service2_f5dca9c.png" alt="" />
                                <p>保姆</p>
                                <p>月嫂</p>
                                <p>育儿嫂</p>
                                <p>家庭长期做饭</p>
                                <p>临时看护</p>
                                <p>老人陪护</p>
                                <p>老人助洁</p>
                                <p>催乳服务</p>
                            </li>
                            <li>
                                <img src="../assets/新建文件夹/service3_d7d7804.png" alt="" />
                                <p>家庭搬家</p>
                                <p>日式搬家</p>
                                <p>企业搬家</p>
                            </li>
                            <li>
                                <img src="../assets/新建文件夹/service4_e93f973.png" alt="" />
                                <p>管道疏通</p>
                                <p>换锁</p>
                                <p>净水器芯更换</p>
                                <p>空调维修</p>
                                <p>空调加氟</p>
                                <p>洗衣机维修</p>
                                <p>油烟机维修</p>
                                <p>冰箱维修</p>
                                <p>热水器维修</p>
                                <p>微波炉维修</p>
                                <p>净水器安装</p>
                                <p>马桶维修</p>
                                <p>灯具安装</p>
                                <p>换纱窗</p>
                            </li>
                            <li>
                                <img src="../assets/新建文件夹/service5_9e6e218.png" alt="" />
                                <p>油烟机清洗</p>
                                <p>冰箱清洗</p>
                                <p>空调清洗</p>
                                <p>洗衣机清洗</p>
                                <p>饮水机清洗</p>
                                <p>微波炉清洗</p>
                                <p>电烤箱清洗</p>
                                <p>消毒柜清洗</p>
                                <p>灶台清洗</p>
                                <p>热水器清洗</p>
                            </li>
                            <li>
                                <img src="../assets/新建文件夹/service6_c1551ec.png" alt="" />
                                <p>深度除螨</p>
                                <p>除甲醛</p>
                                <p>汽车除醛</p>
                                <p>甲醛检测</p>
                                <p>地板打蜡</p>
                                <p>CMA空气质量检测</p>
                            </li>
                            <li>
                                <img src="../assets/新建文件夹/service7_1787dc3.png" alt="" />
                                <p>儿童房换新</p>
                                <p>卫生间换新</p>
                                <p>换地板</p>
                                <p>换地砖</p>
                                <p>换吊顶</p>
                                <p>换壁纸</p>
                                <p>换墙漆</p>
                                <p>防水补漏</p>
                                <p>墙面地面维修</p>
                                <p>家具杂修</p>
                            </li>
                            <li>
                                <img src="../assets/新建文件夹/service8_80c854d.png" alt="" />
                                <p>办公室保洁</p>
                                <p>公寓保洁</p>
                                <p>企业开荒保洁</p>
                                <p>店铺招牌清洗</p>
                                <p>地毯清洗</p>
                                <p>中央空调清洗</p>
                                <p>中央空调维修</p>
                                <p>企业绿植租摆</p>
                                <p>办公室除甲醛</p>
                                <p>企业搬迁</p>
                                <p>企业速运</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-carousel-item>
            <el-carousel-item>
                <div class="s4">
                    <div>
                        <img src="../assets/新建文件夹/pursue_f5104d2.png" alt="" />
                        <p>专业、便捷、安全并驾齐驱，口碑是阿姨帮的立身之本</p>
                    </div>
                    <div class="s5">
                        <ul>
                            <li>
                                <img src="../assets/新建文件夹/feature1_5159c63.png" alt="" />
                                <span>专业</span>
                                <p>服务人员严格筛选、择优录取；</p>
                                <p>系统培训、专业工具、标准化流程</p>
                            </li>
                            <li>
                                <img src="../assets/新建文件夹/feature2_d6d6598.png" alt="" />
                                <span>便捷</span>
                                <p>随时随地快速预约；个性化需求智能匹配；</p>
                                <p>无需现金，轻松支付</p>
                            </li>
                            <li>
                                <img src="../assets/新建文件夹/feature3_95419e3.png" alt="" />
                                <span>安全</span>
                                <p>服务人员实名认证；</p>
                                <p>上门服务家政险保驾护航</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-carousel-item>
            <el-carousel-item>
                <div class="s6">
                    <img class="person" src="../assets/新建文件夹/pepople_3987ad1.png" alt="" />
                    <div class="s7">
                        <img src="../assets/新建文件夹/tit4_da9f386.png" alt="" />
                        <p class="infortext">
                            阿姨帮是一家移动互联网公司，初创团队来自各大互联网上市公司，梦想让我们聚集在一起，为了理想而奋斗。公司在成立之前就获得了雷军/顺为资本的天使投资，是一个提供优质家庭服务和企业后勤服务的平台，用户可以在线预约保洁服务、家电清洗、家居保养、保姆、月嫂、育儿嫂、空气治理、搬家、维修、居家换新等服务，并覆盖北京、上海、广州、深圳、杭州、成都、南京等80多个城市。
                        </p>
                    </div>
                </div>
                <div class="wei">
                    <footer1></footer1>
                </div>
            </el-carousel-item>
        </el-carousel>

    </div>
</template>

<script>
import header1 from "./H-header.vue";
import footer1 from "./H-footer.vue";

// if (document.addEventListener) {//firefox
//         document.addEventListener('DOMMouseScroll', scrollFunc, false);
//     }
// window.onmousewheel=scrollFunc
export default {
  components: {
    header1,
    footer1
  },
  mounted() {
    var throldHold = 200; //规定时间
    var flag = true;
    window.onmousewheel = document.onmousewheel = e => {
      if (flag) {
        flag = false;
        this.scrollFunc(e);
        setTimeout(function() {
          flag = true;
        }, throldHold);
      }
    };
  },
  data() {
    return {
      lunbo: 0 //轮播id
    };
  },
  methods: {
    scrollFunc(e) {
      e = e || window.event;
      if (e.wheelDelta) {
        if (e.wheelDelta > 0) {
        //   alert("鼠标向上滚动");
          if (this.lunbo <= 3 && this.lunbo > 0) {
            this.lunbo--;
            this.$refs.e1lunbo.setActiveItem(this.lunbo);
          }
        } else if (e.wheelDelta < 0) {
        //   alert("鼠标向下滚动");
          if (this.lunbo < 3 && this.lunbo >= 0) {
            this.lunbo++;
            this.$refs.e1lunbo.setActiveItem(this.lunbo);
          }
        }
      }
    //    else if (e.detail) {
    //     //兼容性处理
    //     if (e.detail > 0) {
    //       alert("鼠标向上滚动");
    //     } else if (e.detail < 0) {
    //       alert("鼠标向下滚动");
    //     }
    //   }
    }
  }
};
</script>

<style lang="scss" scoped>
// 头尾样式
.tou {
  position: fixed;
  top: 0;
  z-index: 999;
  animation: move3 0.8s ease-in forwards;
}
.wei {
  position: fixed;
  bottom: 0;
  z-index: 999;
}
// 主页面轮播图
el-carousel-item {
  height: 100vh;
  width: 100vw;
  position: relative;
}

.s6 {
  position: relative;
  background: url("../assets/新建文件夹/bg5_7711f97.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  .person {
    width: 444px;
    height: 665px;
    position: absolute;
    bottom: 0;
    left: 10vw;
  }
  .s7 {
    width: 50vw;
    height: 25vh;
    position: absolute;
    right: 10vw;
    top: 40vh;
    .infortext {
      margin-top: 3vh;
      font-size: 18px;
      color: #333;
      text-align: left;
      line-height: 24px;
    }
  }
}
.s5 {
  ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    margin-top: 7vh;
    li {
      text-align: center;
      span {
        font-size: 22px;
        color: #333;
        display: block;
        margin: 20px 0 10px;
        font-weight: 400;
      }
      p {
        margin: 0;
        padding: 5px 0;
      }
    }
  }
}
.s4 {
  width: 1100px;
  height: 600px;
  margin: auto;
  margin-top: 22vh;
  img {
    display: block;
    margin: auto;
  }
  p {
    text-align: center;
    color: #999;
    margin-top: 1vh;
  }
}
.s3 {
  background: url("../assets/新建文件夹/line_5fec257.png");
  background-repeat: no-repeat;
  background-position-y: 2vh;

  ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    margin-top: 3vh;

    p {
      color: #666666;
    }
  }
}
.s2 {
  width: 1200px;
  height: 800px;
  // background: pink;
  margin: auto;
  margin-top: 22vh;
  img {
    display: block;
    margin: auto;
  }
  p {
    text-align: center;
    color: #999;
    margin-top: 1vh;
  }
}
* {
  margin: 0;
  padding: 0;
}
.join {
  position: fixed;
  box-sizing: border-box;
  padding: 1vw;
  right: 0;
  top: 12vh;
  z-index: 9999;
}
.add {
  position: fixed;
  right: 6vw;
  top: 12.5vh;
  display: none;
}
.join:hover > .add {
  display: block;
}
.wc {
  position: fixed;
  right: 3.5vw;
  bottom: 8vh;
  display: none;
}
.icon:hover > .wc {
  display: block;
}
.wc1 {
  position: fixed;
  right: 3.5vw;
  bottom: 3.5vh;
  display: none;
}
.icon1:hover > .wc1 {
  display: block;
}
.phone {
  position: fixed;
  right: 1vw;
  top: 85vh;
  z-index: 9999;
  .icon {
    width: 55px;
    height: 55px;
    margin-bottom: 1vh;
    background: url("../assets/新建文件夹/icon_a36cf97.png");
    background-size: cover;
    z-index: 10000;
  }
  .icon1 {
    width: 55px;
    height: 55px;
    margin-bottom: 1vh;
    background: url("../assets/新建文件夹/icon2_d91c434.png");
    background-size: cover;
    z-index: 99999;
  }
  .icon2 {
    width: 55px;
    height: 55px;
    background: url("../assets/新建文件夹/icon3_4d34b41.png");
    background-size: cover;
  }
}
.s1 {
  margin-top: 5vh;
}
.bg {
  position: relative;
  .m1 {
    animation: move2 1s ease-in forwards;
  }
  .m2 {
    animation: move2 1s ease-in forwards 0.2s;
  }
  .m3 {
    animation: move2 1s ease-in forwards 0.4s;
  }
  .download {
    position: absolute;
    top: 30vh;
    left: 10vw;
    img {
      display: block;
      margin-bottom: 2vh;
      width: 18vw;
    }
  }
  .girl {
    position: absolute;
    bottom: 0;
    right: 0;
    animation: move1 1s ease-in forwards 0.3s;
    img {
      //   width: 100%;
      width: 550px;
      height: 582px;
    }
  }
}
@keyframes move1 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-300px);
  }
}
@keyframes move2 {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  100% {
    transform: translateX(400px);
  }
}
@keyframes move3 {
  0% {
    transform: translateY(-80px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
}
</style>